<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN">


    <title>购物</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="copyright" content="" />
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>

    <link rel="stylesheet" type="text/css" href="css/goods_list.css" />
    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/slide.css" />


    <!-- 先引入重置的CSS样式文件 -->
    <link rel="stylesheet" href="./css/reset.css">

    <!-- 引入字体图标的css文件 -->
    <link rel="stylesheet" href="./css/iconfont.css">

    <!-- 引入当前页面的CSS文件 -->
    <link rel="stylesheet" href="./css/index.css">

    <script type="text/javascript">
        $(document).ready(function() {
            let showproduct = {
                "boxid": "showbox",
                "sumid": "showsum",
                "boxw": 400, //宽度,该版本中请把宽高填写成一样
                "boxh": 400, //高度,该版本中请把宽高填写成一样
                "sumw": 60, //列表每个宽度,该版本中请把宽高填写成一样
                "sumh": 60, //列表每个高度,该版本中请把宽高填写成一样
                "sumi": 7, //列表间隔
                "sums": 5, //列表显示个数
                "sumsel": "sel",
                "sumborder": 1, //列表边框，没有边框填写0，边框在css中修改
                "lastid": "showlast",
                "nextid": "shownext"
            };
            $.ljsGlasses.pcGlasses(showproduct); //方法调用，务必在加载完后执行
        });
    </script>
    <style>
        .search {
            margin-top: 6px;
        }

        .dsc-search .search-text {
            height: 34px;
        }

        .city-choice {
            float: left;
        }

        .city-choice .dsc-cm {
            position: static;
            border: none;
            height: 28px;
            line-height: 28px;
            z-index: 1;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="header_bar">
        <div class="header con_width">
            <!-- 左侧菜单 -->
            <div class="header_nav">
                <ul>
                    <li><a href="index1.html">糯米商城</a></li>
                    <li><a href="#">MIUI</a></li>
                    <li><a href="#">IoT</a></li>
                    <li><a href="#">云服务</a></li>
                    <li><a href="#">金融</a></li>
                    <li><a href="#">有品</a></li>
                    <li><a href="#">小爱开放平台</a></li>
                    <li><a href="#">政企服务</a></li>
                    <li><a href="#">Select Region</a></li>
                </ul>
            </div>
            <!-- 右侧购物车 -->
            <div class="header_shopcart">
                <div class="shopcart_logo">
                    <a href="cart1.html">
                        <i class="iconfont icon-cart"></i>
                        购物车（0）
                    </a>
                    <div class="shopcart-info">
                        <p>
                            购物车中还没有商品，赶紧选购吧!
                        </p>
                    </div>
                </div>
            </div>
            <!--右侧登录、注册-->
            <div class="user-auction">
                <ul>
                    <li><a href="login.html">登录</a></li>
                    <li><a href="register.html">注册</a></li>
                    <li><a href="user.html">个人中心</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="w1200_container">
    <div style="margin-top: 20px;float: left;">
        <!--页面必要代码,img标签上请务必带上图片真实尺寸px-->
        <div id="showbox">
            <li class="goods_photo">
                <img src="img/1617178901.jpg" width="280" height="280" />
                <img src="img/1617178902.jpg" width="280" height="280" />
                <img src="img/1617178903.jpg" width="280" height="280" />
                <img src="img/1617178904.jpg" width="280" height="280" />
            </li>
            <li class="goods_photo1">
                <img src="img/1617178905.jpg" width="280" height="280" />
                <img src="img/1617178906.jpg" width="280" height="280" />
                <img src="img/1617178907.jpg" width="280" height="280" />
            </li>
        </div>
        <!--展示图片盒子-->
        <div id="showsum"></div>
        <!--展示图片里边-->
        <p class="showpage">
            <a href="javascript:void(0);" id="showlast">
                < </a>
            <a href="javascript:void(0);" id="shownext"> > </a>
        </p>
    </div>
    <div class="pay_content fl" id="detail_shop">

    </div>
    <div class="clear"></div>
    <!-- 底部 start -->
    <div class="footer" style="padding-top: 50px">
        <!--服务 start-->
        <div class="footer_nav con_width clearfix">
            <ul>
                <li><a href="#"><i class="iconfont icon-buoumaotubiao46"></i>预约维修服务</a></li>
                <li><a href="#"><i class="iconfont icon-7"></i>7天无理由退货</a></li>
                <li><a href="#"><i class="iconfont icon-15"></i>15天免费换货</a></li>
                <li><a href="#"><i class="iconfont icon-liwu1"></i>满150元包邮</a></li>
                <li><a href="#"><i class="iconfont icon-dingwei"></i>520余家售后网点</a></li>
            </ul>
        </div>
        <!--服务 end-->
        <!-- 底部列表 start-->
        <div class="footer_item con_width clearfix">
            <div class="footer_item_left">
                <ul>
                    <li>
                        <p>帮助中心</p>
                        <ul>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">购物指南</a></li>
                            <li><a href="#">订单操作</a></li>
                        </ul>
                    </li>
                    <li>
                        <p>服务支持</p>
                        <ul>
                            <li><a href="#">售后政策</a></li>
                            <li><a href="#">自助服务</a></li>
                            <li><a href="#">相关下载</a></li>
                        </ul>
                    </li>
                    <li>
                        <p>线下门店</p>
                        <ul>
                            <li><a href="#">糯米之家</a></li>
                            <li><a href="#">服务网点</a></li>
                            <li><a href="#">授权体验店</a></li>
                        </ul>
                    </li>
                    <li>
                        <p>关于糯米</p>
                        <ul>
                            <li><a href="#">了解糯米</a></li>
                            <li><a href="#">加入糯米</a></li>
                            <li><a href="#">投资者关系</a></li>
                        </ul>
                    </li>
                    <li>
                        <p>关注我们</p>
                        <ul>
                            <li><a href="#">新浪微博</a></li>
                            <li><a href="#">官方微信</a></li>
                            <li><a href="#">联系我们</a></li>
                        </ul>
                    </li>
                    <li>
                        <p>特色服务</p>
                        <ul>
                            <li><a href="#">F码通道</a></li>
                            <li><a href="#">礼物码</a></li>
                            <li><a href="#">防伪查询</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="footer_item_right">
                <p class="phone">400-100-5678</p>
                <p class="date">周一至周日 8:00-12:00<br/>(仅收市话费)</p>
                <a href="#" class="btn-relative"><i class="iconfont icon-lianxi1"></i> 联系客服</a>
            </div>
        </div>
        <!-- 底部列表 end-->
        <!-- 底部说明 start -->
        <div class="footer_desc">
            <div class="footer_desc_con con_width">
                <div class="logo">
                    <img src="./images/mi-logo.png" alt="MIlogo" title="糯米官网">
                </div>
                <div class="desc_con_item">
                    <div class="desc_con_item_detail clearfix">
                        <ul>
                            <li><a href="#">糯米商城</a></li>
                            <li><a href="#">MIUI</a></li>
                            <li><a href="#">米家</a></li>
                            <li><a href="#">多看</a></li>
                            <li><a href="#">游戏</a></li>
                            <li><a href="#">路由器</a></li>
                            <li><a href="#">米粉卡</a></li>
                            <li><a href="#">政企服务</a></li>
                            <li><a href="#">糯米天猫店</a></li>
                            <li><a href="#">隐私政策</a></li>
                            <li><a href="#">问题反馈</a></li>
                            <li><a href="#">廉正举报</a></li>
                            <li><a href="#">Select Region</a></li>
                        </ul>
                    </div>
                    <p class="desc_con_txt">
                        &copy;<a href="#">mi.com</a> 京ICP证110507号
                        <a href="#">京ICP备10046444号</a>
                        <a href="#">京公网安备11010802020134号 </a>
                        <a href="#">京网文[2017]1530-131号</a>
                        <br/>
                        违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                    </p>
                </div>
                <div class="desc_con_links">
                    <img src="./images/links/truste.png"/>
                    <img src="./images/links/v-logo-2.png"/>
                    <img src="./images/links/v-logo-1.png"/>
                    <img src="./images/links/v-logo-3.png"/>
                    <img src="./images/links/ba10428a4f9495ac310fd0b5e0cf8370.png"/>
                </div>
            </div>
            <div class="slogan ir con_width">探索黑科技，糯米为发烧而生</div>
        </div>
        <!-- 底部说明 end -->
    </div>
    <!-- 底部 end -->
</div>

<template id="template_detail_shop">
    <div class="pay_title">{{goodsName}}</div>
    <div class="summary">
        <div class="summary_price_warp">
            <div class="s_p_w_wrap">
                <div class="summary_item si_shop_price">
                    <div class="si_tit">商 城 价</div>
                    <div class="si_warp">
                        <strong class="shop_price"><em>¥</em>{{price}}</strong>
                        <span class="price_notify" data-userid="63" data-goodsid="650" ectype="priceNotify">降价通知</span>
                    </div>
                </div>
                <div class="summary_item si_market_price">
                    <div class="si_tit">市 场 价</div>
                    <div class="si_warp">
                        <div class="m_price"><em>¥</em>3598.79</div>
                    </div>
                </div>
                <div class="si_info">
                    <div class="si_cumulative">累计评价<em>0</em></div>
                    <div class="si_cumulative">累计销量<em>0</em></div>
                </div>
                <div class="clear"></div>
                <div class="summary_basic_info" >
                    <div class="summary_item is_stock">
                        <div class="si_tit">配送</div>
                        <div class="si_warp">
										<span class="initial_area">
                                                                                                              上海市
                                        </span>
                            <span>至</span>
                            <div class="city-choice" id="city-choice" data-ectype="dorpdown">
                                <div class="dsc-choie dsc-cm" ectype="dsc-choie">
                                    <input type="text" value="石家庄" class="search" style="margin: 3px 0 0 0;border: none;background: #f7f8f8;width: 40px;" />
                                </div>
                            </div>
                            <div class="store_warehouse">
                                <div class="store_prompt"><strong>有货</strong>，下单后立即发货</div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="summary_item is_service">
                        <div class="si_tit">服务</div>
                        <div class="si_warp">
                            由
                            <a href="" class="link_red" target="_blank">本网站</a> 发货并提供售后服务
                            <span class="gary">[ 快递：<em>¥</em>4.30 ]</span>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="summary_item is_integral">
                        <div class="si_tit">红包</div>
                        <div class="si_warp">可用 <span class="integral">0</span></div>
                    </div>
                    <div class="summary_item is_number clear">
                        <div class="si_tit">数量</div>
                        <div class="si_warp">
                            <div class="amount_warp">
                                <input class="text buy_num" value="1" name="number">
                                <div class="a_btn">
                                    <a href="javascript:void(0);" class="btn_add" ><i class="iconfont icon-up">+</i></a>
                                    <a href="javascript:void(0);" class="btn_reduce btn_disabled" ><i class="iconfont icon-down">-</i></a>
                                </div>
                            </div>
                            <span>库存&nbsp;<em id="goods_attr_num" ectype="goods_attr_num">1000</em>&nbsp;个</span>
                        </div>
                    </div>
                    <div class="summary_item regular">
                        <div class="si_tit">规格</div>
                        <div class="si_warp">
                            <ul class="regular_list">
                                <li class="regular_sort">红色</li>
                                <li>蓝色</li>
                            </ul>
                        </div>
                    </div>

                </div>
                <!--class="layui-btn layui-btn-normal"-->

                <div class="choose_btns clear" >
                    <a href="#" class="btn_buynow" >立即购买</a>
                    <a href="javascript:void(0);" onclick="addIntoCartList(this)" class="btn_append layui-btn layui-btn-danger business" data-type="auto" data-method="setTop">
                        <p type={{id}} style="display:none" class="id"></p>
                        <p type={{price}} style="display:none" class="price"></p>
                        <p type={{goodsName}} style="display:none" class="goodsName"></p>
                        <p type={{goodsUrl}} style="display:none" class="goodsUrl"></p>
                        <p type={{goodsNum}} style="display:none" class="goodsNum"></p>
                        <p type={{subtotal}} style="display:none" class="subtotal"></p>
                        <i class="iconfont icon_carts">
                            <img src="images/cart1.png" style="margin-top: -5px;">
                        </i>
                        加入购物车
                    </a>
                </div>
                <div class="summary_item is_service">
                    <div class="si_tit">温馨提示</div>
                    <div class="si_warp gray">
                        不支持退换货服务
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>




</body>
<script type="text/javascript" src="js/kuCity.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlider.js"></script>




<script>
    $('.li_dorpdown').hover(function() {
        $('.dorpdown-layer').show();
    });
    $('.li_dorpdown').mouseleave(function() {
        $('.dorpdown-layer').hide();
    });
    $('.icon-close').click(function() {
        $('.top_banner').hide();
    });
    $('.cate-layer-right-slide img').mouseenter(function() {

        $(this).delay('300').animate(300);
    });
    $('.cate-layer-right-slide img').mouseleave(function() {
        $(this).css('border', 'none')
    });
    //alert($('.buy_num').val());
    $('.btn_add').click(function(){
        let index=$('.buy_num').val();
        index++;
        $('.buy_num').val(index++);
    });
    $('.regular_list li').click(function(){
        $(this).parent().children('li').removeClass('regular_sort');
        $(this).addClass('regular_sort');
    });
    $('.btn_reduce').click(function(){
        let index=$('.buy_num').val();
        if(index>1){
            index--;
            $('.buy_num').val(index--);
        }
    });
    //		$('.categorys-type').mouseenter(function(){
    //			$('.categorys-tab-content').show();
    //		});
    //		$('.categorys-type').mouseleave(function(){
    //			$('.categorys-tab-content').hide();
    //		});
</script>
<script>
    $('.search').kuCity();
</script>
<!--滚动展示-->

<script>

    let cartList = [];

    let list = JSON.parse(sessionStorage.getItem("key"));

    $(function () {
        addGoodsDetails();
    });


    function addGoodsDetails() {

        //let list=JSON.parse(sessionStorage.getItem("key"));


        //list.forEach(item=>console.log(item.goodsNum));

        //业务内容清空
        $("#detail_shop").html("");

        let goodsListHtml = "";
        //获取模板
        let goodsTemplate = $("#template_detail_shop").html();


        list.forEach(item=>{
            let goodsHtml = goodsTemplate
                .replaceAll("{{goodsName}}", item.remark)
                .replaceAll("{{id}}", item.goodsId)
                .replaceAll("{{goodsUrl}}", item.imgUrl)
                .replaceAll("{{goodsNum}}", item.goodsNum)
                .replaceAll("{{subtotal}}", item.subtotal)
                .replaceAll("{{price}}", item.price);
            //拼接HTML
            goodsListHtml += goodsHtml;
        });


        //填充html到指定位置
        $("#detail_shop").html(goodsListHtml);

        list = [];
        sessionStorage.setItem("key",JSON.stringify(list));
    }



    function addIntoCartList(obj) {



        let id = $(obj).children("p.id").attr("type");
        let goodsName = $(obj).children("p.goodsName").attr("type");
        let price = $(obj).children("p.price").attr("type");
        let url = $(obj).children("p.goodsUrl").attr("type");
        let goodsNum = $(obj).children("p.goodsNum").attr("type");
        let subtotal = $(obj).children("p.subtotal").attr("type");

        let shop = {
            goodsId: id,
            imgUrl: url,
            remark: goodsName,
            price: price,
            goodsNum: goodsNum,
            subtotal: subtotal,
        };


        //商品信息存到数组里
        cartList.push(shop);


        //goodsList.forEach(item=>console.log(item));
        let list = JSON.parse(sessionStorage.getItem("list"));

        //判断之前是否添加过商品到购物车
        if (list == null){
            sessionStorage.setItem("list",JSON.stringify(cartList));
        } else {
            sessionStorage.setItem("list",JSON.stringify(list.concat(cartList)));
        }

        //list = JSON.parse(sessionStorage.getItem("list"));

        //list.forEach(item=>console.log(item));


        cartList = [];

        window.alert("添加成功！")

    }

</script>





</html>